<template>
  <view v-if="store.getCartList.length === 0">
    <van-empty class="custom-image"
      image="https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png"
      description="购物车是空的，赶快去挑选好货" />
  </view>
  <view v-else class="cart-container">
    <view class="shop">
      <uni-icons type="shop" size="18" />
      <text class="shop-name">嗨购商城</text>
    </view>
    <uni-swipe-action>
      <uni-swipe-action-item :right-options="options" v-for="item in store.getCartList" :key="item.proid"
        @click="store.deleteGoods(item.proid)">
        <view class="goods-cell" @click="toDetail(item.proid)">
          <!-- $event 代表van-checkbox的change事件本身要传递出来的值
      $event 具体是啥，你要看具体使用的组件中，是如何传递值的 -->
          <view @click.stop="noop">
            <van-checkbox class="checkbox" :value="item.state" @change="changeSelect($event, item.proid)"></van-checkbox>
          </view>
          <view class="img">
            <image :src="item.img" />
          </view>
          <view class="content">
            <text class="title">{{ item.proname }}</text>
            <text class="price">￥{{ item.price }}</text>
            <view @click.stop="noop">
              <uni-number-box class="num" :min="1" v-model="item.number"></uni-number-box>
            </view>
          </view>
        </view>
      </uni-swipe-action-item>
    </uni-swipe-action>
    <van-submit-bar :price="store.getTotalPrice * 100" :disable="store.getAcount === 0" button-text="提交订单">
      <van-checkbox :value="store.isSlectAll" @change="store.selectNotAll">全选</van-checkbox>
    </van-submit-bar>
  </view>
</template>

<script setup lang="ts">
import { useCartStore } from '@/store/cart'
import { ref, watch } from 'vue'
import {useTarBarBadge } from '@/hooks'

const store = useCartStore()
useTarBarBadge()
const toDetail = (proid: string) => {
  uni.navigateTo({
    url: '/subcontract/detail/index?proid=' + proid
  })
}
const noop = () => {
  // console.log('---noop---')
}

const changeSelect = (e: any, proid: string) => {
  store.changeState({ proid, state: e.detail })
}
//总数
const getUpdateNum = () => { }
const options = [
  {
    text: '删除',
    style: {
      backgroundColor: '#c82519'
    }
  }
]
//徽标设置
// onShow(() => {
//   uni.setTabBarBadge({
//     index: 2,
//     text: store.getAcount + ''
//   })
// })
// watch(() => store.getAcount, (newVal) => {
//   if (newVal > 0) {
//     uni.setTabBarBadge({
//       index: 2,
//       text: newVal + ''
//     })
//   } else {
//     uni.removeTabBarBadge({ index: 2 })
//   }
// }, {
//   immediate: true
// })

</script>

<style lang="less" scoped>
::v-deep .van-empty__image {
  padding-top: 200rpx;
  width: 80px;
  height: 80px;
}

.cart-container {
  overflow: auto;
  height: calc(100vh - 50px);

  .shop {
    background-color: white;
    border-bottom: 1px solid #edeeed;
    padding: 5px 10px;

    .shop-name {
      margin-left: 5px;
      font-size: 14px;
      color: #3f3f3f;
    }
  }

  .goods-cell {
    display: flex;
    background-color: white;
    border-bottom: 1px solid #edeeed;
    height: 100%;
    align-items: center;
    height: 220rpx;
    padding: 10rpx 10rpx 0rpx 20rpx;

    .checkbox {
      width: 60rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .img {
      width: 180rpx;
      height: 180rpx;
      margin: 0rpx 10rpx;
      display: flex;
      align-items: center;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .content {
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        color: #323233;
        font-size: 28rpx;
      }

      .price {
        color: red;
        font-size: 26rpx;
        margin: 16rpx 0;
      }

      .num {
        display: flex;
        margin-right: 20rpx;
        justify-content: flex-end;
      }
    }
  }

  .delete-button {
    height: 100%;
  }

  ::v-deep .van-submit-bar {
    background: hsla(0, 0%, 100%, 0.95);
  }
}
</style>
